<template>
	<view class="content">
		<u-navbar title="登录" @leftClick="back" :placeholder='true' height="88rpx" leftIconColor="#fff"
			titleStyle='color:#fff;font-size:32rpx' left-icon-size="32rpx" bg-color="#FF594D" :autoBack="false">
		</u-navbar>

		<view class="logo">
			<image src="../../static/images/spell-page/Frame@2x (6).png" mode=""></image>
			<view>产品优选 商品连锁</view>
		</view>
		<view class="btns">
			<view class="login" style="font-size: 34rpx;line-height: 70rpx;" @click="consentVer"
				v-if="pohoneFlag && !consent">
				授权登录
			</view>
			<view class="login" style="font-size: 34rpx;line-height: 70rpx;" @click="conLogin" v-if="pohoneFlag && consent">
				授权登录
			</view>
			<button ref="phoneBtn" class="login" style="font-size: 34rpx;line-height: 70rpx;" v-if="!pohoneFlag && consent"
				open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">授权登录</button>

			<!-- <view class="login" @click="login">
				
			</view> -->
			<view class="goIndex" style="font-size: 34rpx;" @click="toIndex">
				返回首页
			</view>
		</view>
		<view class="agreement">
			<u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange">
				<u-checkbox labelSize='32rpx' activeColor="#FF594D" shape='circle' v-for="(item, index) in checkboxList1"
					:key="index" :label="item.label" :name="item.name">
				</u-checkbox>
			</u-checkbox-group>
			<navigator url="/pages_goods/user-agreement/user-agreement">《用户协议》</navigator>和<navigator
				url="/pages_goods/privacy-policy/privacy-policy">《隐私政策》</navigator>
		</view>
	</view>
</template>

<script>
	import {
		wxLogin,
		memberInfo,
		userInfo,
		alterUser,
		userphone,
		userQrCode
	} from '../../../api/mine.js'
	export default {
		mounted() {

		},
		data() {
			return {
				checkboxValue1: [],
				// 基本案列数据
				checkboxList1: [{
					name: '1',
					label: '同意',
					disabled: false
				}],
				phoneInfo: {},
				loginResCode: '',
				user: {},
				userInfo: {},
				pohoneFlag: false,
				consent: false
			}
		},
		onLoad() {
			const _this = this
			setTimeout(() => {
				uni.login({
					async success(res) {
						_this.weixinLogin(res.code)
					}
				})
			}, 0)
		},
		methods: {
			consentVer() {
				if (this.consent) {
					return
				}
				uni.showToast({
					title: '请同意用户协议和隐私政策',
					icon: 'none'
				})
			},
			back() {
				uni.removeStorageSync('userInfo')
				this.$store.commit('setIsLogin', false)
				this.$store.commit('setUser', {})
				uni.removeStorageSync('user')
				uni.removeStorageSync('userQrCode')
				this.$store.commit('setUserQrCode', '')
				uni.navigateBack()
			},
			conLogin() {
				uni.setStorageSync('userInfo', JSON.stringify(this.userInfo))
				this.$store.commit('setIsLogin', true)
				this.$store.commit('setUser', this.user)
				uni.setStorageSync('user', JSON.stringify(this.user))
				uni.showToast({
					title: '登录成功',
					success: () => {
						this.getUserQrCode(this.userInfo.id)
						setTimeout(() => {
							this.$store.commit('setTabValue', 0)
							uni.switchTab({
								url: '/pages/index/index'
							})
						}, 1000)
					}
				})
			},
			async getUserQrCode(id) {
				const res = await userQrCode(id)
				console.log(res);
				if (res.code == 200) {
					uni.setStorageSync('userQrCode', res.data)
					this.$store.commit('setUserQrCode', res.data)
				}
			},

			async weixinLogin(wxCode) {
				const res = await wxLogin(wxCode)
				console.log(res);
				if (res.code == 200) {
					this.userInfo = res.data

					this.$store.commit('setUserInfo', this.userInfo)
					this.getUserInfo(res.data.id)
				}
			},
			// 获取用户信息
			async getUserInfo(id) {
				const res = await userInfo(id)
				this.user = res.data
				if (res.data.phone) {
					console.log('存在手机号');
					this.pohoneFlag = true
					this.getMemberInfo(res.data.id)
					return
				}
				console.log('没有手机号');
				this.pohoneFlag = false
			},
			getPhoneNumber(e) {
				// _this.phoneInfo = res.data.phone_info
				uni.showLoading({
					title: '登录中...',
					mask: true,
				})

				// console.log("errMsg", e.detail.errMsg)
				const that = this

				if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
					console.log('用户拒绝提供手机号');
					uni.showToast({
						title: '请授权手机号',
						icon: 'none'
					})
				} else {
					console.log('用户同意提供手机号');
					// console.log("code", e.detail.code)
					// console.log(e);
					this.getUserPhone(e.detail.code)
				}
				// e.detail.errMsg == 'getPhoneNumber:fail Error: 用户未绑定手机，请先在微信客户端进行绑定后重试'
				// 微信会自动引导用户去绑定手机
			},
			async getUserPhone(data) {
				const res = await userphone(data)
				console.log(res);
				if (res.code != 200) {
					uni.showToast({
						title: '登录失败',
						icon: 'error'
					})
					return
				}
				this.phoneInfo = res.data
				this.updateUser({
					id: this.userInfo.id,
					phone: this.phoneInfo
					// phone: ''
				})


			},
			toIndex() {
				uni.removeStorageSync('userInfo')
				this.$store.commit('setIsLogin', false)
				this.$store.commit('setUser', {})
				uni.removeStorageSync('user')
				uni.removeStorageSync('userQrCode')
				uni.removeStorageSync('member')
				this.$store.commit('setUserQrCode', '')
				this.$store.commit('setMember', {})
				uni.switchTab({
					url: '/pages/index/index'
				})
				this.$store.commit('setTabValue', 0)
			},
			checkboxChange(n) {
				// console.log(this.checkboxValue1);
				if (n[0]) {
					this.consent = true
				} else {
					this.consent = false
				}
			},
			async getMemberInfo(id) {
				console.log(id);
				const res = await memberInfo(id)
				// console.log(res);
				if (res.data[0]) {
					this.$store.commit('setIsMember', true)
					uni.setStorageSync('isMember', true)
					uni.setStorageSync('member', JSON.stringify(res.data[0]))
					this.$store.commit('setMember', res.data[0])
					return
				}
				uni.setStorageSync('isMember', false)
			},
			async updateUser(data) {
				const res = await alterUser(data)
				// console.log(res);
				uni.hideLoading()
				if (res.code != 200) {
					uni.showToast({
						title: '登录失败',
						icon: 'error'
					})
					return
				}
				this.$store.commit('setIsLogin', true)
				this.$store.commit('setUser', this.user)
				uni.setStorageSync('user', JSON.stringify(this.user))
				uni.showToast({
					title: '登录成功',
					success: () => {
						this.getUserQrCode(this.userInfo.id)
						this.$store.commit('setTabValue', 0)
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}, 1000)
					}
				})
			},
			login() {
				const _this = this
				uni.login({
					async success(res) {
						console.log(res);
						_this.weixinLogin(res.code)

					}
				})

			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #fff;
		height: 100vh;

		.logo {
			padding: 150rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			color: #777;
			font-size: 26rpx;

			image {
				width: 400rpx;
				height: 400rpx;
			}
		}

		.btns {
			padding: 0 30rpx 100rpx;
			text-align: center;
			line-height: 70rpx;
			font-size: 32rpx;

			.login {
				height: 70rpx;
				background-color: #FF594D;
				border-radius: 444rpx;
				color: #fff;
				margin-bottom: 30rpx;
			}

			.goIndex {
				height: 70rpx;
				border-radius: 444rpx;
				box-sizing: border-box;
				border: 1rpx solid #FF594D;
				color: #FF594D;
			}
		}

		.agreement {
			display: flex;
			align-items: center;
			font-size: 30rpx;
			justify-content: center;
		}
	}
</style>